<div class="panel panel-default" style=" height:366px;">
  <div class="panel-heading">
    <i class="ion-navicon-round"></i>
   <span class="tite">待办事项</span>       <span class="my">今日事今日毕 明日事今日计</span>
  </div>
  <div class="panel-body">
      <div class="task-todo-container">
              <input class="form-control task-todo" value="" type="text" placeholder="添加事项" [(ngModel)]="newTodoText">
              <i class="add-item-icon ion-plus-round" (click)="addToDoItem()"></i>
            <hr>
          <div style="overflow-x: hidden;height: 250px;">


          <ul *ngIf="!issl" class="todo-list">
              <li  *ngFor="let item of getNotDeleted()" [ngClass]="{checked: item.isChecked, active: item.isActive}"
                  (mouseenter)="item.isActive=true" (mouseleave)="item.isActive=false">
                <label class="todo-checkbox custom-checkbox custom-input-success" (click)="isChecked(item.Id,item.isChecked)">
                    <i [hidden]="!item.isChecked" class="ion-checkmark-round"></i>
                    <i [hidden]="item.isChecked" class="ion-android-radio-button-off"></i>
                  <span class="cut-with-dots">{{ item.text }}</span>
                </label>
                <i class="remove-todo ion-close-round" [hidden]="!item.isActive" (click)="delete(item.Id)"></i>
              </li>
            </ul>
          
            <ul *ngIf="issl" class="todo-list">
                <li  *ngFor="let item of getNotDeleted()" [ngClass]="{checked: item.isChecked, active: item.isActive}"
                    (mouseenter)="item.isActive=true" (mouseleave)="item.isActive=false">
                  <label class="todo-checkbox custom-checkbox custom-input-success">
                      <input type="checkbox" [(ngModel)]="item.isChecked">
                      <i [hidden]="!item.isChecked" class="ion-checkmark-round"></i>
                      <i [hidden]="item.isChecked" class="ion-android-radio-button-off"></i>
                    <span class="cut-with-dots">{{ item.text }}</span>
                  </label>
                  <i class="remove-todo ion-close-round" [hidden]="!item.isActive" (click)="item.deleted = true"></i>
                </li>
              </ul>


        </div>
        </div>
        


  </div>
</div>
    